<template>
  <div class="box">
    <public-head :title="title" :hasSearch="hasSearch"></public-head>
    <van-tabs
      v-model="active"
      color="#198AFF"
      line-width="20px"
      title-active-color="#198AFF"
      title-inactive-color="#999"
    >
      <van-tab title="未派单">
        <div class="content">
          <span class="title">工单标题</span> <span class="text">待派单</span>
          <p>这是工单内容这是工单内容哦以及企业文化的资料这是工单内容哦。</p>
          <div>
            <img src="../../../assets/images/portrait.png" alt="">
            <span class="name">派单工号</span>
            <span>2021-06-06</span>
          </div>
        </div>
      </van-tab>
      <van-tab title="待回复">
        <div class="content">
          <span class="title">工单标题</span> <span class="reply">待回复</span>
          <p>这是工单内容这是工单内容哦以及企业文化的资料这是工单内容哦。</p>
          <div>
            <img src="../../../assets/images/portrait.png" alt="">
            <span class="name">派单工号</span>
            <span>2021-06-06</span>
          </div>
        </div>
      </van-tab>
      <van-tab title="已退回">
        <div class="content">
          <span class="title">工单标题</span> <span class="return">已退回</span>
          <p>这是工单内容这是工单内容哦以及企业文化的资料这是工单内容哦。</p>
          <div>
            <img src="../../../assets/images/portrait.png" alt="">
            <span class="name">派单工号</span>
            <span>2021-06-06</span>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import PublicHead from "../../../components/PublicHead";
export default {
  name: "paidan",
  components: {
    PublicHead,
  },
  data() {
    return {
      active: 0,
      title: "派单管理",
      hasSearch: true,
    };
  },
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.box{
    height 100vh
    .content{
      width 345px
      margin 10px 0 0 15px
      background-color #fff
      border-radius 5px
      font-size 12px
      color #999
      line-height 20px
      padding 12px 10px
      box-sizing:border-box
      img{
        width 18px
        height 18px
        vertical-align middle
      }
      p{
        font-size 14px
        margin 10px 0
      }
      .title{
        font-size 16px
        color #333
      }
      .text{
        border 0.5px solid #1ADFAB
        padding 2px 3px
        color #1ADFAB
        border-radius 5px
        font-size 8px
      }
      .return{
        border 0.5px solid #F95425
        padding 2px 3px
        color #F95425
        border-radius 5px
        font-size 8px
      }
      .reply{
        border 0.5px solid #198AFF
        padding 2px 3px
        color #198AFF
        border-radius 5px
        font-size 8px
      }
      .name{
        margin 0 188px 0 5px
      }
    }
}
</style>
